<template>
    <div style="padding-top:50px">
        <Row>
            <Col :sm="{span:12,offset:6}" :md="{span:14,offset:5}" :lg="{span:10,offset:7}">
                <div style="padding:20px">
                    <el-card>
                        <div slot="header">
                            <h2>
                            <i class="el-icon-s-custom"></i>
                            {{ title }}</h2>
                        </div>
                        <div>
                            <el-form :rules="rules" label-position="top" ref="login" status-icon label-width="100px" :model="user" style="text-align:left">
                                <el-form-item label="账号" prop="account">
                                    <el-input v-model="user.account" ></el-input>
                                </el-form-item>
                                <el-form-item label="密码" prop="pass">
                                    <el-input v-model="user.pass" type="password"></el-input>
                                </el-form-item>
                                <el-form-item label="请滑动至最右侧进行验证">
                                    <div class="block" style="padding:0 10px">
                                        <el-slider v-model="user.validation" input-size="large" :show-tooltip="false"></el-slider>
                                    </div>
                                </el-form-item>
                                <el-form-item style="text-align:right;margin-bottom:0">
                                    <el-button  plain size="small" @click="lseutil.goPath()">返回LSE</el-button>
                                    <router-link to="/reg">
                                      <el-button  plain size="small">去注册</el-button>
                                    </router-link>
                                    <el-button  @click="login('login')" plain size="small">提交</el-button>
                                </el-form-item>
                                <el-form-item style="text-align:right">
                                  <div class="el-upload__tip" @click="sealModelFlag = true">封禁账号查询</div>
                                </el-form-item>
                            </el-form>
                        </div>
                    </el-card>
                </div>
            </Col>
        </Row>
        <!-- 封禁信息查询 -->
      <el-dialog
        title="封禁账号查询"
        :visible.sync="sealModelFlag"
        width="80%"
        center>
        <div style="text-align:right;margin-top:10px;">
          <el-input
            type="text"
            placeholder="请输入账号"
            v-model="sealAccount"
            maxlength="20"
            show-word-limit
            style="width:calc(100% - 75px)"
          >
          </el-input>
          <el-button size="" @click="getSealInfo">提交</el-button>
        </div>
        <div style="margin-top:10px" v-show="sealMap.flag">
          <el-card shadow="hover">
            <h3>{{sealMap.msg}}</h3><br>
            <span>账号封禁开始时间: <Time :time="sealMap.data.start"/></span>
            <Divider></Divider>
            <span>账号封禁结束时间: <Time :time="sealMap.data.end"/></span>
          </el-card>
        </div>
      </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      title: 'LSE-登录',
      user: {
        account: '',
        pass: '',
        validation: 0
      },
      rules: {
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { max: 20, message: '最大不可超过20个字符', trigger: 'blur' }
        ],
        pass: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { max: 20, message: '最大不可超过20个字符', trigger: 'blur' }
        ]
      },
      // 账号封禁
      sealModelFlag: false,
      sealAccount: '',
      sealMap: {
        data: {
          start: '',
          end: ''
        },
        msg: '',
        flag: false
      }
    }
  },
  methods: {
    login (formName) {
      this.$refs[formName].validate((value) => {
        if (value && this.user.validation === 100) {
          let load = this.lseutil.loading('正在登录')
          this.lseajax.post(this.lseajax.baseurl + '/users/login', {
            account: this.user.account,
            pass: this.user.pass
          }).then((res) => {
            load.close()
            if (res.code === 200) {
              // 存储token
              this.lseajax.storageJson.set(this.lsedata.tokenName, res.data.token.info)
              this.lseutil.goPath()
            } else {
              this.lseutil.msg({
                msg: res.msg
              })
            }
          }).catch(res => {
            load.close()
          })
        } else {
          this.lseutil.msg({
            msg: '请输入账号密码以及拖动验证'
          })
        }
      })
    },
    getSealInfo () {
      let load = this.lseutil.loading('正在查询')
      this.lseajax.post(this.lseajax.baseurl + '/users/getSealInfo', {
        account: this.sealAccount
      }).then((res) => {
        load.close()
        if (res.code === 200) {
          this.sealMap.data = res.data
          this.sealMap.msg = res.msg
          this.sealMap.flag = true
        } else {
          this.sealMap.flag = false
          this.lseutil.msg({
            msg: res.msg
          })
        }
      }).catch(res => {
        load.close()
      })
    },
    timestampToTime (timestamp) {
      // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let date = new Date(timestamp)
      let Y = date.getFullYear() + '-'
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      let D = date.getDate() + ' '
      let h = date.getHours() + ':'
      let m = date.getMinutes() + ':'
      let s = date.getSeconds()
      return Y + M + D + h + m + s
    }
  }
}
</script>

<style scoped>

</style>
